<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/common/includes.jsp" %>

<!DOCTYPE html>
<html>
<head>
	<title>${profileOwner.username}</title>
	<%@ include file="/WEB-INF/common/meta.jsp" %>
	<%@ include file="/WEB-INF/common/global_res.jsp" %>
	
	<script type="text/javascript" src="${ctx}/res/js/follow_unfollow.js" ></script>
</head>
<body class="light-gray-bg">

<%@ include file="/WEB-INF/common/header.jsp" %>

<div class="container">
	<div id="profile" class="row">
		<div class="profile-wrap wrap">
			<div class="profile-card">
				<div class="profile-card-inner clearfix">
					<a href="${ctx}/profile/${profileOwner.userId}" class="profile-pic">
						<c:choose>
							<c:when test="${currentUser.picSet == false}">
								<img src="${ctx}/res/imgs/default_portrait.png" class="thumb thumb_128" />
							</c:when>
							<c:otherwise>
								<c:url var="profilePicUrl" value="/img/u/n/${currentUser.id}.jsp" />
								<img src="${profilePicUrl}" class="thumb thumb_128" />
							</c:otherwise>
						</c:choose>
					</a>
					<div class="profile-info">
						<div class="clearfix mbl">
							<span class="username lfloat">${profileOwner.username}</span>
							<shiro:authenticated>
								<c:choose>
									<c:when test="${profileOwner.userId == currentUser.userId}">
										<a href="${ctx}/settings/profile" class="btn silver medium rfloat" >Edit profile</a>
									</c:when>
									<c:otherwise>
									
									<c:choose>
										<c:when test="${isFollowing}">
											<a href="#follow_unfollow_link" data-user-id="${profileOwner.userId}" class="btn-follow btn silver medium following rfloat">
										</c:when>
										<c:otherwise>
											<a href="#follow_unfollow_link" data-user-id="${profileOwner.userId}" class="btn-follow btn silver medium follow rfloat">
										</c:otherwise>
									</c:choose>
									<span class="z-follow">Follow</span><span class="z-following">Following</span><span class="z-unfollow">Unfollow</span></a>
									</c:otherwise>
								</c:choose>
							</shiro:authenticated>
						</div>
						
						<div class="clearfix">
							<div class="lfloat" style="width: 620px;">
								<p class="fcl fsti">${profileOwner.aboutMe}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div align="center" class="mbl fsl" style="margin-top: -30px;"><a class="dark fwb" href="#explore">${numOfTopicsWhichUserCreate} topics</a> · <a class="dark" href="#">${numOfTopicsWhichUserLike} likes</a></div>
			
		</div>
	</div>
</div>

<div id="back_to_top"><span class="arrow-n"></span></div>

<script type="text/javascript">

jq(document).ready(function() {
	
	new FollowUnfollow({
		'j_follow_unfollow_link' : jq('a[href="#follow_unfollow_link"]'),
		'_follow_url' : "${ctx}/users/follow",
		'_unfollow_url' : "${ctx}/users/unfollow"
	});
	
});

</script>

<%@ include file="/WEB-INF/common/footer.jsp" %>

</body>
</html>